<template>
  <div id="app">
    <the-header v-if="headerVisible" />
    <menu-bar
      v-if="menuVisible"
      class="mb"
      :menus="menus"
      :current-path="currentPath"
      :tabs-class="tabsClass"
    />
    <router-view></router-view>
  </div>
</template>

<script>
import TheHeader from '@/components/the-header/TheHeader.vue'
import MenuBar from '@/components/menu-bar/MenuBar.vue'
import config from '@/router/config.js'
export default {
  name: 'App',
  provide () {
    return {
      rootThemeColor: '#fb7299',
      rootRouter: this.$router,
      routerConfig: config,
      rootTitle: '哔哩哔哩 (゜-゜)つロ 干杯~-bilibili',
      rootKeyword: 'B站,bilibili,哔哩哔哩,哔哩哔哩动画,动漫,电影,在线动漫,高清电影',
      rootDescription: 'bilibili是国内知名的在线视频弹幕网站，拥有最棒的ACG氛围，哔哩哔哩内容丰富多元，涵盖动漫、电影、二次元舞蹈视频、在线音乐、娱乐时尚、科技生活、鬼畜视频等。下载客户端还可离线下载电影、动漫。'
    }
  },
  components: {
    TheHeader,
    MenuBar
  },
  data () {
    return {
      tabsClass: 'top-menu-bar',
      currentPath: '/',
      headerVisible: true,
      menuVisible: true
    }
  },
  computed: {
    menus () {
      const arr = []
      for (const c of config) {
        const { name, tid, route, hide } = c
        if (hide) {
          continue
        }
        arr.push({
          title: name,
          path: route === '/' ? route : `/channel/${tid}`
        })
      }
      return arr
    }
  },
  watch: {
    '$route' (to) {
      const { meta: { headerVisible, menuVisible } } = to
      this.headerVisible = headerVisible
      this.menuVisible = menuVisible
      this.menuVisible && this.setCurrentPath(to)
    }
  },
  created () {
    this.menuVisible && this.setCurrentPath(this.$route)
  },
  methods: {
    matchPath (id) {
      return config.findIndex(c => c.tid === id)
    },
    setCurrentPath (route) {
      const { path, params: { id, subid } } = route
      if (!id && !subid) {
        if (path === '/') {
          this.currentPath = path
        } else {
          this.$router.replace({ name: '404' })
        }
      } else {
        const match = this.matchPath(id - 0)
        if (match === -1) {
          this.$router.replace({ name: '404' })
        } else {
          if (id && subid) {
            this.currentPath = `/channel/${id}`
          } else {
            this.currentPath = path
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
@import url("//at.alicdn.com/t/font_1759261_blj44qlo8ih.css");
@import "~normalize.css";
@import "@/styles/global.scss";
</style>
<style lang="scss" scoped>
  .mb {
    position: sticky;
    top: rem(44px);
    z-index: 99;
  }
  .top-menu-bar ::v-deep .van-tab{
    flex-basis: 100/6.5*1% !important;
  }
</style>
